<template>
  <div class="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm z-50">
    <div class="bg-white rounded-3xl p-8 text-center transform animate-bounce-slow">
      <h2 class="text-3xl font-bold text-green-600 mb-6 animate-wiggle">
        {{ title }}
      </h2>
      <div class="space-y-2 mb-8">
        <slot></slot>
      </div>
      <div class="flex gap-4 justify-center">
        <button
          @click="$emit('restart')"
          class="game-button bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"
        >
          再玩一次
        </button>
        <button
          @click="$router.push('/')"
          class="game-button bg-gray-500 hover:bg-gray-600"
        >
          返回主菜单
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.game-button {
  @apply px-6 py-3 text-white font-bold rounded-lg transition-all duration-300 transform hover:scale-105;
}

.animate-bounce-slow {
  animation: bounce 2s infinite;
}

.animate-wiggle {
  animation: wiggle 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(-5%); }
  50% { transform: translateY(0); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
</style> 